<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<image src="/static/icons/back.png" mode="aspectFit" class="back-icon"></image>
			</view>
			<view class="nav-title">看视频赚金币</view>
		</view>
		
		<!-- 视频列表 -->
		<view class="video-list">
			<view 
				v-for="(video, index) in videos" 
				:key="index"
				class="video-item"
				@click="watchVideo(video)"
			>
				<image :src="video.cover" mode="aspectFill" class="video-cover"></image>
				<view class="video-info">
					<text class="video-title">{{video.title}}</text>
					<text class="video-duration">{{video.duration}}秒</text>
				</view>
				<view class="video-reward">
					<text class="reward-amount">+{{video.reward}}</text>
					<text class="reward-unit">金币</text>
				</view>
			</view>
		</view>

		<!-- 奖励弹窗 -->
		<uni-popup ref="rewardPopup" type="center" :mask-click="false">
			<view class="popup-content">
				<view class="popup-title">观看完成</view>
				<view class="reward-info">
					<text class="reward-text">获得奖励</text>
					<text class="reward-amount">{{currentReward}}金币</text>
				</view>
				<button class="confirm-btn" @click="closePopup">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			currentReward: 0,
			videos: [
				{
					title: '趣味小视频',
					duration: 15,
					reward: 10,
					cover: '/static/video/cover1.jpg'
				},
				{
					title: '搞笑短视频',
					duration: 20,
					reward: 15,
					cover: '/static/video/cover2.jpg'
				},
				{
					title: '精彩瞬间',
					duration: 30,
					reward: 20,
					cover: '/static/video/cover3.jpg'
				}
			]
		}
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		// 观看视频
		watchVideo(video) {
			// TODO: 调用广告SDK播放视频
			uni.showLoading({
				title: '加载中...'
			});
			
			// 模拟视频播放
			setTimeout(() => {
				uni.hideLoading();
				
				// 记录奖励
				this.currentReward = video.reward;
				
				// 显示奖励弹窗
				this.$refs.rewardPopup.open();
			}, 1000);
		},
		
		// 关闭弹窗
		closePopup() {
			this.$refs.rewardPopup.close();
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f8f9fa;
}

.status-bar {
	background: #FF6B6B;
}

.nav-bar {
	display: flex;
	align-items: center;
	height: 44px;
	background: #FF6B6B;
	padding: 0 15px;
}

.nav-left {
	width: 40px;
	height: 100%;
	display: flex;
	align-items: center;
}

.back-icon {
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(1);
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
}

.video-list {
	padding: 15px;
}

.video-item {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 15px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	
	&:active {
		opacity: 0.9;
	}
}

.video-cover {
	width: 120px;
	height: 80px;
	border-radius: 8px;
	margin-right: 15px;
}

.video-info {
	flex: 1;
	
	.video-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
		display: block;
		margin-bottom: 8px;
	}
	
	.video-duration {
		font-size: 14px;
		color: #666666;
	}
}

.video-reward {
	text-align: center;
	margin-left: 15px;
	
	.reward-amount {
		font-size: 20px;
		font-weight: bold;
		color: #FF6B6B;
		display: block;
	}
	
	.reward-unit {
		font-size: 12px;
		color: #666666;
	}
}

.popup-content {
	width: 280px;
	background-color: #ffffff;
	border-radius: 16px;
	padding: 30px 20px;
	text-align: center;
}

.popup-title {
	font-size: 24px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 30px;
}

.reward-info {
	margin-bottom: 30px;
	
	.reward-text {
		font-size: 14px;
		color: #666666;
		margin-bottom: 10px;
	}
	
	.reward-amount {
		font-size: 32px;
		font-weight: bold;
		color: #FF6B6B;
	}
}

.confirm-btn {
	width: 100%;
	height: 44px;
	line-height: 44px;
	background: #FF6B6B;
	color: #ffffff;
	border-radius: 22px;
	font-size: 16px;
	
	&:active {
		opacity: 0.9;
	}
}
</style> 